<template>
  <div class="upload-page w-100">
    <el-container>
      <el-main
        v-loading="loading"
        element-loading-text="正在上传..."
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
      >
        <div class="report-toolbar flex items-center" style="flex-flow: row-reverse">
          <div style="display: flex">
            <!-- <el-button type="text" class="m-r" @click="downloadBtn"  size="mini" style="color:#79A2E6;justify-content: flex-end;">
              <i class="el-icon-download m-r-xs"></i>下载模板
            </el-button> -t-->
          <el-button type="text" class="m-r" @click="downloadBtn"  size="mini" style="justify-content: flex-end;">
              <i class="el-icon-download m-r-xs"></i>下载模板
            </el-button>
            <el-upload
              class="upload-demo"
              :action="uploadUrl"
              :data="uploadData"
              :headers="headers"
              :on-success="importSuccess"
              :on-progress="importProgress"
              :before-upload="beforeAvatarUpload"
              :show-file-list="false"
            >
              <!-- <el-button style="background:#79A2E6;border-color:#79A2E6;color:#fff;"  size="mini">点击上传</el-button> -t -->
              <el-button style="border-color:#79A2E6;color:#fff;"  type="primary" size="mini">点击上传</el-button>
            </el-upload>
          </div>
        </div>
        <div class="main-table">
          <div class="table-box" id="data-table">
            <el-table :data="tableData" stripe style="width: 100%" :height="tableHeight">
              <el-table-column
                align="center"
                v-for="(item, k) in config"
                :key="k"
                :prop="item.props"
                :label="item.name"
                :width="item.width"
                :min-width="item.minWidth"
              >
                <template slot-scope="scope">
                  <div v-html="scope.row[`${item.props}`]"></div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <el-pagination
            class="m-t-sm m-b-md text-right"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-size="pageSize"
            background
            layout=" prev, pager, next"
            :total="total"
          ></el-pagination>
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {
      tableHeight: 100,
      tableData: [],
      config: [],
      total: 0,
      pageSize: 20,
      page: 1,
      uploadData: {
        type: 2
      },
      uploadUrl:
        process.env.VUE_APP_API_URL +
        '/caict/reference/uploadStationBusinessHall',
      loading: false,
      headers: {
        Authorization: 'Bearer ' + localStorage.getItem('Authorization')
      }
    }
  },
  computed: {
    ...mapState(['home'])
  },
  mounted() {
    this.getStationBusinessHallPage()
    window.addEventListener('resize', () => {
      this.autoTableHeight()
    })
  },
  methods: {
    autoTableHeight() {
      this.tableHeight = document.getElementsByClassName(
        'table-box'
      )[0].clientHeight
    },
    // 每页条数
    handleSizeChange(val) {},
    // 上传完成
    importSuccess(response) {
      if (response.code == 1) {
        let data = response.data.replace(
          '@@rootServer@@',
          process.env.VUE_APP_API_URL
        )
        this.$alert(data, '导入结束', {
          dangerouslyUseHTMLString: true,
          type: 'success',
          center: true,
          showClose: false
        })
        this.getStationBusinessHallPage()
        this.loading = false
      } else {
        this.$message.error('上传失败')
        this.loading = false
      }
    },
    // 上传前文件校验
    beforeAvatarUpload(file) {
      let Xls = file.name.substr(file.name.lastIndexOf('.'))
      if (Xls === '.xlsx' || Xls === '.XLSX') {
        return file
      } else {
        this.showInfo('上传文件只能是 xlsx 格式!', 'error')
        return false
      }
    },
    // 上传中
    importProgress() {
      this.loading = true
    },
    // 下载
    downloadBtn() {
      window.location.href =
        process.env.VUE_APP_API_URL + '/caict/file/businessHallTemplate.xlsx'
    },
    // 当前页
    handleCurrentChange(val) {
      this.page = val
      this.getStationBusinessHallPage()
    },
    // 分页获取表格数据
    getStationBusinessHallPage() {
      let tableConfig = [
        { name: '营业厅名称', props: 'name' },
        { name: '经度', props: 'lon' },
        { name: '纬度', props: 'lat' }
      ]
      this.api
        .getStationBusinessHallPage({
          type: 2,
          pageSize: this.pageSize,
          pageNum: this.page
        })
        .then(data => {
          this.total = data.data.total
          let datas = data.data.list
          if (datas && datas.length > 0) {
            let data1 = datas[0]
            if (data1['extJson']) {
              let dataIndex = 0
              while (dataIndex < datas.length) {
                let extJson = JSON.parse(datas[dataIndex]['extJson'])
                let extArrays = Object.keys(extJson)
                let j = 0
                while (extArrays && j < extArrays.length) {
                  if (dataIndex == 0) {
                    tableConfig.push({
                      name: extArrays[j],
                      props: 'property' + j
                    })
                  }
                  datas[dataIndex]['property' + j] = extJson[extArrays[j]]
                  j++
                }
                dataIndex++
              }
            }
          }
          this.config = tableConfig
          this.tableData = datas
          this.autoTableHeight()
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.upload-page {
  .el-main {
    display: block;
    background-color: #fff;
    height: 100%;
  }
  .report-toolbar {
    padding: 0 15px;
    height: 52px;
  }
  .main-table {
    height: calc(100% - 62px);
    padding: 0 15px 15px 15px;
    .table-box {
      height: calc(100% - 28px);
    }
  }
}
</style>
